<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <div class="main">
    <div class="nav">智慧养老平台数据中心</div>
    <div class="nav_btn">
      <div class="btn_left">
        <router-link to="Main">
          <div class="btn_list listActive">总控</div>
        </router-link>
        <router-link to="Based_Care">
          <div class="btn_list">居家养老</div>
        </router-link>
        <router-link to="Institution_Care">
          <div class="btn_list">机构养老</div>
        </router-link>
        <router-link to="Home_Bed">
          <div class="btn_list">家庭床位</div>
        </router-link>
        <router-link to="Community_Support">
          <div class="btn_list">社区养老</div>
        </router-link>
      </div>
      <div class="btn_right">
        <router-link to="Elderly-Position-Monitoring">
          <div class="btn_list">防走丢</div>
        </router-link>
        <router-link to="Order-Monitoring">
          <div class="btn_list">工单监控</div>
        </router-link>
        <router-link to="Vital-Signs-Monitoring">
          <div class="btn_list">生命体征</div>
        </router-link>
        <router-link to="Iiving-Home-Security-Monitoring">
          <div class="btn_list">居家安防</div>
        </router-link>
        <router-link to="Community-Canteen-Monitoring">
          <div class="btn_list">社区食堂</div>
        </router-link>
      </div>
    </div>


    <RouterView />
  </div>

 
</template>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
}

.main {
  background-image: url(@/assets/img/bg.jpg);
  position: relative;
  background-size: cover;
  background-color: hsla(240, 39%, 10%, 1);
}
.nav {
  position: relative;
  top: 0.5vw;
  width: 100%;
  height: 5vw;
  background: url(@/assets/img/top.png) no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 4vw;
  color: #0efcff;
  font-size: 1.4vw;
  letter-spacing: 0.4vw;
}

.nav_btn {
  position: absolute;
  top: 1.5vw;
  width: 100%;
  height: 2vw;
}

.btn_left {
  float: left;
  width: 25%;
  margin-left: 5%;
  height: 100%;
}

.btn_right {
  float: right;
  width: 25%;
  margin-right: 5%;
  height: 100%;
}

.btn_list {
  position: relative;
  float: left;
  width: 4.5vw;
  height: 1.6vw;
  text-align: center;
  line-height: 1.6vw;
  font-size: 0.9vw;
  color: #0efcff;
  letter-spacing: 0.1vw;
  cursor: pointer;
}

.btn_left a,
.btn_right a {
  display: inline-block;
}

.btn_left a:nth-child(2) {
  margin: 0 0.6vw;
}

.btn_left a:nth-child(4) {
  margin-left: 0.6vw;
}

.btn_right a:nth-child(2) {
  margin: 0 0.6vw;
}

.btn_right a:nth-child(4) {
  margin-left: 0.6vw;
}

.btn_list:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #6176af;
  transform: skewX(-38deg);
}

.btn_list:hover::before {
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;
}
</style>



